<template>
    <div>
     <div class="caidanming"><strong>诊所管理 /</strong>诊所用户信息</div>  
      <div class="title">诊所用户信息</div>
        <!-- 我是诊所信息页面 -->
      <div>
        <el-button type="primary" size="mini" @click="clinicOpen">
              <i class="el-icon-plus"></i>
              创建诊所用户
        </el-button>
      </div> 
      <!-- 主体表格部分 -->
      <div style="margin-top:20px">
          <el-row>
                <!-- 主体表格部分 -->
                <template>
                    <el-table
                    :data="roleTable"
                    border
                    fit
                    style="width: 100%">
                     <el-table-column align="center"
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="name"
                        label="序号" 
                        type="index"
                        width="90">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="admin_name"
                        label="用户编码"
                        width="140">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="role_supper_admin"
                        label="所属角色"
                        width="134">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="region_name"
                        label="所属区域">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="admin_remark_column"
                        label="描述"
                        width="184">
                    </el-table-column>

                    <el-table-column align="center"
                        prop="clinic_state"
                        label="是否关联诊所">
                        <template slot-scope="scope">
                            
                            <span v-if="scope.row.clinic_state===1" style="color:green;font-weight: 500;
        font-size: 14px;">已关联</span>
                            <span v-if="scope.row.clinic_state===0" style="color:red;font-weight: 500;
        font-size: 14px;">未关联</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column align="center"
                        prop="admin_state"
                        label="状态">
                        <!-- template slot-scope="scope" scope.row这三个属性可以获取当前表格的一整行数据-->
                        <template slot-scope="scope" >
                            <!-- {{scope.row.admin_state===0?'启用':'停用'}} -->
                            <span v-if="scope.row.admin_state===1" style="color:red;font-weight: 500;
        font-size: 14px;">停用</span>
                            <span v-if="scope.row.admin_state===0" style="color:green;font-weight: 500;
        font-size: 14px;">启用</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"
                        prop="address"
                        label="操作"
                        width='360'>
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handle(scope.$index, scope.row,0)">编辑</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="deleteAdmin(scope.row.admin_id)">删除
                            </el-button>
                             
                            <el-button size="mini" @click="stateClick(scope.row)" type="warning">
                                {{scope.row.admin_state===0?'停用':'启用'}}
                            </el-button>
                            <el-button size="mini" @click="bindingClinic(scope.row)"  v-if="scope.row.admin_state===0&&scope.row.clinic_state===0" style=" display: show;"
                                type="success"
                                >
                                关联诊所
                            </el-button>
                            
                        </template>
                    </el-table-column>
                    </el-table>
                </template>
            </el-row>
      </div>

      <!-- 添加用户模态框 -->
            <div>
                <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="60%">
                    <el-form :model="addRoleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm" label-suffix=":">
                        <el-form-item label="用户账号" prop="name">
                            <el-input v-model="addRoleForm.admin_name"></el-input>
                        </el-form-item>
                        <el-form-item label="用户密码" prop="name">
                            <el-input type="password" v-model="addRoleForm.admin_pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="分配角色" prop="name">
                            <template>
                                <el-select v-model="addRoleForm.role_id" clearable placeholder="请选择">
                                    <el-option
                                    v-for="item in roles"
                                    :key="item.role_id"
                                    :label="item.role_supper_admin"
                                    :value="item.role_id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="所属县区" >
                            <template>
                                <el-select v-model="addRoleForm.area_code" @change="reginById" clearable placeholder="请选择">
                                    <el-option
                                    v-for="item in regin"
                                    :key="item.cid"
                                    :label="item.region_name"
                                    :value="item.region_id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="所属街道">
                            <template>
                                <el-select v-model="addRoleForm.area_name"     clearable >
                                    <el-option
                                    v-for="item in street"
                                    :key="item.cid"
                                    :label="item.region_name"
                                    :value="item.region_id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="addRoleForm.admin_remark_column"/>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible">取 消</el-button>
                        <el-button type="primary" @click="insertAdmin">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 关联诊所弹出模态框 -->
                <el-dialog
                    title="提示"
                    :visible.sync="clinicVisible"
                    width="60%"
                    >
                <template>
                    <template>
                    <el-table
                    :data="roleTable1"
                    border
                    fit
                    style="width: 100%">
                     <el-table-column align="center"
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="name"
                        label="序号" 
                        type="index"
                        >
                    </el-table-column>
                    <el-table-column align="center"
                        prop="community_hospitals_number"
                        label="诊所编号"
                        width="120">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="community_hospitals_name"
                        label="诊所名称"
                        width="163">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="community_hospitals_principal"
                        label="负责人">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="community_hospitals_map"
                        label="诊所地址"
                        width="204">
                    </el-table-column>

                   
                    
                    <el-table-column align="center"
                        prop="community_hospitals_state"
                        label="状态">
                        <!-- template slot-scope="scope" scope.row这三个属性可以获取当前表格的一整行数据-->
                        <template slot-scope="scope" >
                            <!-- {{scope.row.admin_state===0?'启用':'停用'}} -->
                            <span v-if="scope.row.community_hospitals_state===1" style="color:red;font-weight: 500;
        font-size: 14px;">停用</span>
                            <span v-if="scope.row.community_hospitals_state===0" style="color:green;font-weight: 500;
        font-size: 14px;">启用</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"
                        prop="address"
                        label="操作"
                        width='120'>
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            v-if="scope.row.community_hospitals_state===0"
                            @click="guanlian(scope.row)">关联</el-button>
                        </template>
                    </el-table-column>
                    </el-table>
                </template>
                </template>
                </el-dialog>
                <!-- 如果没有诊所信息弹出提示框 -->
                <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible1"
                    width="30%">
                    <span style="font-size:15px;color:#777;">很抱歉....暂无联诊所信息，请先创建诊所....</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="queding">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
   </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
         addRoleForm:{
              admin_name:'',
              admin_pwd:'',
              area_code:'',
              area_name:'',
              admin_id:''
        },
        clinicTable:{

        },
        visibleCancel:'',
        roleTable:[],
        roleTable1:[],
        dialogVisible:false,
        roles:[],
        regin:[],
        street:[],
        clinicVisible:false,
        adminId:'',
        dialogVisible1:false,
        biaoshi:false,
    }
  },
  methods:{
    initAdmin(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
         // 获取所有用户信息
        axios.get("http://localhost/city_admin/findAllUser?roleId="+userInfo.role_id+"&area_code="+userInfo.area_code)
        .then((r)=>{
            
            console.log(r.data.data);
            this.roleTable=r.data.data;
        });
    },
    // 全局定义响应消息
    initMessge(r){
        if(r.data.code===200){
                this.$message({
                message: r.data.msg,
                type: 'success'
                });
                this.initAdmin();
            }else{
                this.$message.error('很抱歉，'+r.data.msg+'，请重试');
        }
    },
    // 全局定义还没被关联的诊所 方便调用
    initClinic(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
        axios.get("http://localhost/Comm/findClinicNotBinding/"+userInfo.area_code)
        .then((r)=>{
           if(r.data.code===200){
                this.roleTable1=r.data.data;
           }else{
               this.roleTable1=[];
           }
           
        })
    },
        //确定按钮触发事件
    insertAdmin(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
        this.addRoleForm.admin_creation_id=userInfo.admin_id;
        axios.post("http://localhost/city_admin/insertAdmin",this.addRoleForm)
        .then(r=>{
            if(r.data.code===200){
                this.dialogVisible=false;
                 this.$message({
                message: '添加成功',
                type: 'success'
                });
                this.addRoleForm={};
                this.initAdmin();
            }
        });
    },
    // 修改状态
    stateClick(scope){
        axios.post("http://localhost/city_admin/updateState",scope)
        .then(r=>{
           this.initMessge(r);
        });
    },
    clinicOpen(){
      this.dialogVisible=true;
    },
    //  区县触发事件
    reginById(reginId){
        axios.get("http://localhost/RegionController/"+reginId)
        .then((r)=>{
           this.addRoleForm.area_name=r.data.data[0].region_name;
           this.street=r.data.data;
        })
        this.countiesId=reginId;
    }
    ,
    // 关联诊所按钮
    bindingClinic(score){
        console.log("用户",score);
        this.adminId=score.admin_id;
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
        console.log("区域id",userInfo.area_code);
        axios.get("http://localhost/Comm/findClinicNotBinding/"+userInfo.area_code)
        .then((r)=>{
            console.log("数据",r);
           if(r.data.code===200){
                this.roleTable1=r.data.data;
                this.clinicVisible=true;
           }else{
                this.dialogVisible1=true;
           }
           
        })
        
        
    },
    // 删除用户按钮
    deleteAdmin(adminId){
         axios.get("http://localhost/city_admin/"+adminId)
        .then((r)=>{
            this.initMessge(r);
        })
    },
    // 关联操作
    guanlian(scope){
         axios.get("http://localhost/Comm/clinicAdmin",{
             params:{
                 adminId:this.adminId,
                 communityHospitalsId:scope.community_hospitals_id
             }
         })
        .then((r)=>{
            this.initMessge(r);
            if(r.data.code==200){
                this.initClinic();
            }else{
                
            }
        })
    },
    // 有无诊所信息提示框 确定按钮
    queding(){
        this.dialogVisible1=false;
    }
    
  },
  mounted(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
     // 获取所有角色
        axios.get("http://localhost/Role/countyRole")
        .then((r)=>{
  
            this.roles=r.data.data;
        });
        // 获取地区
        axios.get("http://localhost/RegionController/findCounty?area_code="+userInfo.area_code)
        .then((r)=>{
          
            this.regin=r.data.data;
        });
        // 获取所有用户信息
        axios.get("http://localhost/city_admin/findAllUser?roleId="+userInfo.role_id+"&area_code="+userInfo.area_code)
        .then((r)=>{

            this.roleTable=r.data.data;
        });
  }
}
</script>
<style scoped>
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}
</style>
